<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>Vue基础 | 学习笔记</title><meta name="author" content="lzoxun"><meta name="copyright" content="lzoxun"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="基础相关信息 编程范式: 申明式编程(以前 jQuery 那种命令式编程) 样式App引入，公共组件单独抽离，页面内组件页面文件夹下  实例 option el:挂载 vue 将要管理的 HTML 模板 template:运行的时候template与el同时存在，那么temp模板的HTML的代码会替换#app挂载的DOM节点 data:Object|Function 组件 data必须是函数,用">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue基础">
<meta property="og:url" content="http://example.com/2023/07/22/web/vue/vue-vue2/index.html">
<meta property="og:site_name" content="学习笔记">
<meta property="og:description" content="基础相关信息 编程范式: 申明式编程(以前 jQuery 那种命令式编程) 样式App引入，公共组件单独抽离，页面内组件页面文件夹下  实例 option el:挂载 vue 将要管理的 HTML 模板 template:运行的时候template与el同时存在，那么temp模板的HTML的代码会替换#app挂载的DOM节点 data:Object|Function 组件 data必须是函数,用">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png">
<meta property="article:published_time" content="2023-07-22T07:14:09.696Z">
<meta property="article:modified_time" content="2023-07-22T07:14:09.696Z">
<meta property="article:author" content="lzoxun">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="http://example.com/2023/07/22/web/vue/vue-vue2/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
  root: '/',
  algolia: undefined,
  localSearch: {"path":"/search.xml","preload":true,"top_n_per_article":1,"unescape":true,"languages":{"hits_empty":"找不到您查询的内容：${query}","hits_stats":"共找到 ${hits} 篇文章"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  dateSuffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#1f1f1f","position":"bottom-left"},
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  },
  autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'Vue基础',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2023-07-22 15:14:09'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
    win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = url
      if (id) link.id = id
      link.onerror = reject
      link.onload = link.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        link.onload = link.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(link)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          const now = new Date()
          const hour = now.getHours()
          const isNight = hour <= 6 || hour >= 18
          if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
          else if (t === 'light') activateLightMode()
          else activateDarkMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 6.3.0"></head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><script>(()=>{
  const $loadingBox = document.getElementById('loading-box')
  const $body = document.body
  const preloader = {
    endLoading: () => {
      $body.style.overflow = ''
      $loadingBox.classList.add('loaded')
    },
    initLoading: () => {
      $body.style.overflow = 'hidden'
      $loadingBox.classList.remove('loaded')
    }
  }

  preloader.initLoading()
  window.addEventListener('load',() => { preloader.endLoading() })

  if (false) {
    document.addEventListener('pjax:send', () => { preloader.initLoading() })
    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
  }
})()</script><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">108</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">1</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">0</div></a></div><hr class="custom-hr"/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header"><nav id="nav"><span id="blog-info"><a href="/" title="学习笔记"><span class="site-name">学习笔记</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Vue基础</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-07-22T07:14:09.696Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-07-22T07:14:09.696Z" title="更新于 2023-07-22 15:14:09">2023-07-22</time></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Vue基础"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="基础"><a href="#基础" class="headerlink" title="基础"></a>基础</h2><h3 id="相关信息"><a href="#相关信息" class="headerlink" title="相关信息"></a>相关信息</h3><ul>
<li><code>编程范式</code>: 申明式编程(以前 jQuery 那种命令式编程)</li>
<li>样式App引入，公共组件单独抽离，页面内组件页面文件夹下</li>
</ul>
<h3 id="实例-option"><a href="#实例-option" class="headerlink" title="实例 option"></a>实例 option</h3><ul>
<li><code>el</code>:挂载 vue 将要管理的 HTML 模板</li>
<li><code>template</code>:运行的时候<code>template</code>与<code>el</code>同时存在，那么temp模板的HTML的代码会替换<code>#app</code>挂载的DOM节点</li>
<li><code>data</code>:Object|Function<ul>
<li>组件 data<code>必须</code>是函数,用 return 对象里的数据<ul>
<li>组件需要被<code>多次调用</code>，使用函数返回可以<code>保证每个组件</code>的<code>数据是独立的</code>，不会相互音响</li>
<li>如果就想要公用 把对象定义到外面，统一返回这个对象</li>
</ul>
</li>
<li>组件无法访问到 vue 实例 data 的数据</li>
</ul>
</li>
<li><code>methods</code>:方法列表(不与实例挂钩单独的叫函数)</li>
<li><code>computed</code>:计算属性,只要 return 任意属性变化，都会更新 a<ul>
<li><code>缓存</code>:页面上无论用几次，里面计算过程不会重复调用，属性发生变化才会调用</li>
</ul>
</li>
<li><code>filters</code>:过滤器对象</li>
<li><code>components:&#123;my-title:myTitle&#125;</code>:<code>局部组件</code>注册，只能在当前实例上用</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">computed</span>:&#123;</span><br><span class="line">    <span class="comment">// 因为计算属性一般不需要set属性的,只要获取就可以了</span></span><br><span class="line">    <span class="attr">a</span>:&#123;</span><br><span class="line">        <span class="attr">get</span>:<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">b</span> + <span class="variable language_">this</span>.<span class="property">c</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// 简写</span></span><br><span class="line">    <span class="attr">a</span>:<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">        xxxxxx</span><br><span class="line">        xxxxxx</span><br><span class="line">        <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">b</span> + <span class="variable language_">this</span>.<span class="property">c</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h3><ul>
<li><p><code>Mustache语法</code>: <code>&#123;&#123;&#125;&#125;</code></p>
<ul>
<li>变量</li>
<li>简单 js 表达式</li>
</ul>
</li>
<li><p>指令</p>
<ul>
<li><code>v-once</code>:标签里的数据开始渲染一次，数据变化则不会更新</li>
<li><code>v-html</code>:展示 html</li>
<li><code>v-text</code></li>
<li><code>v-pre</code>:直接显示内容</li>
<li><code>v-cloak</code>:<ul>
<li>加到<code>挂载的dom</code>上，vue 解析之后会<code>自动删除v-cloak</code></li>
<li>样式：[v-cloak]{display:none} 这样可以处理双大括号闪烁的问题</li>
</ul>
</li>
</ul>
</li>
<li><p><code>v-bind:| 语法糖 :</code>:绑定属性</p>
<ul>
<li>类:<code>:class=&quot;&#123;类名:bool&#125;&quot;</code> ,多个调用方法，返回这个对象</li>
<li>样式<ul>
<li><code>:style=&quot;&#123;属性名:变量属性值&#125;&quot;</code>， 支持<code>font-size</code>或<code>fontSize</code></li>
</ul>
</li>
</ul>
</li>
<li><p><code>v-on:|@:</code>:绑定方法</p>
<ul>
<li><code>$event</code>:把对应的形参当做时间对象</li>
<li>修饰符 @click.stop<ul>
<li><code>.stop</code>:阻止事件冒泡</li>
<li><code>.prevent</code>:阻止默认事件</li>
<li><code>.enter|.13</code>:回车</li>
<li><code>.once</code>:第一次事件生效</li>
</ul>
</li>
</ul>
</li>
<li><p><code>v-if v-else-if v-else</code></p>
<ul>
<li>复用问题：切换之后某些相似元素复用，给他们指定不同<code>key</code>就不会复用了</li>
</ul>
</li>
<li><p><code>v-show</code></p>
<ul>
<li>对比 v-if<ul>
<li>显示隐藏&#x2F;加载卸载</li>
</ul>
</li>
</ul>
</li>
<li><p><code>v-for</code></p>
<ul>
<li>数组数据:<code>item,index</code></li>
<li>对象数据:<code>value,key,index</code></li>
<li>key 属性:<ul>
<li>编辑器 -&gt; 虚拟 DOM -&gt; 浏览器- 响应式</li>
<li>有相同父元素的子元素必须有独特的 key</li>
</ul>
</li>
<li>无法响应式的操作<ul>
<li>arr[0]&#x3D;1<ul>
<li><code>C被标识为E</code>，<code>D被标识为C</code>,在<code>最后增加一个</code>标识为 D</li>
</ul>
</li>
<li>有不同且固有的 key 时在 B 与 C 之间插入 E()<ul>
<li>直接在<code>B与C</code>之间<code>插入节点</code>，C 和 D 无需变化,大大提高性能</li>
<li>直接用 index 没有意义，因为 index 是会变化的，我们要的是能<code>一一对应</code>的 key</li>
</ul>
</li>
<li>插入时通过 diff 算法对比，查看虚拟 dom 与浏览器 dom 的 key</li>
</ul>
</li>
</ul>
</li>
<li><p><code>v-model</code>:表单元素双向绑定</p>
<ul>
<li>1、v-bind:绑定 value 属性，数据改变 value 改变</li>
<li>2、v-on:绑定@input 事件，value 改变重新赋值数据</li>
<li>案例<ul>
<li>多选框如果 v-model 设置同一个数组，勾选会自动添加</li>
<li>select 添加 multiple 多选</li>
</ul>
</li>
<li>修饰符<ul>
<li><code>.lazy</code>:数据变化回车更新</li>
<li><code>.number</code>:值转 number 类型</li>
<li><code>.trim</code>:去除作用空格</li>
</ul>
</li>
</ul>
</li>
<li><p><code>v-slot:slotName</code>:绑定具名插槽</p>
</li>
<li><p>响应式</p>
<ul>
<li>无法响应式的操作<ul>
<li>arr[0]&#x3D;1</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="组件化"><a href="#组件化" class="headerlink" title="组件化"></a>组件化</h2><h3 id="组件注册与父子组件"><a href="#组件注册与父子组件" class="headerlink" title="组件注册与父子组件"></a>组件注册与父子组件</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;my-title&gt;&lt;/my-title&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//创建组件构造器</span></span><br><span class="line"><span class="keyword">let</span> myTitle = <span class="title class_">Vue</span>.<span class="title function_">extend</span>(&#123;</span><br><span class="line">    <span class="attr">template</span>:<span class="string">`&lt;div&gt;title&lt;/div&gt;`</span></span><br><span class="line">    <span class="attr">components</span>:&#123; <span class="comment">//子组件</span></span><br><span class="line">       <span class="attr">myChild</span>:myChild</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">let</span> myChild = <span class="title class_">Vue</span>.<span class="title function_">extend</span>(&#123; <span class="comment">//子组件</span></span><br><span class="line">    <span class="attr">template</span>:<span class="string">`&lt;div&gt;child&lt;/div&gt;`</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//注册全局组件（可以在多个vue实例下使用）</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="string">&#x27;my-title&#x27;</span>,myTitle)</span><br><span class="line"></span><br><span class="line"><span class="comment">//在Vue实例范围内使用组件</span></span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="组件通讯"><a href="#组件通讯" class="headerlink" title="组件通讯"></a>组件通讯</h3><ul>
<li><p><code>props</code> 配合 <code>$eimt events</code></p>
<ul>
<li><p><code>:propName=&#39;xxx&#39;</code>: 组件标签绑定传递的数据,不用绑定的话传递的数据只是<code>字符串</code></p>
<ul>
<li>有些版本不支持驼峰需要<code>:prop-name=&#39;xxx</code>处理</li>
</ul>
</li>
<li><p><code>props</code>:子组件中接收</p>
<ul>
<li>数组 : props:[‘name1’,’name2’，’xxx’]</li>
<li>对象 :</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">props</span>:&#123;</span><br><span class="line">    <span class="attr">name1</span>:<span class="title class_">Array</span>,</span><br><span class="line">    <span class="attr">name4</span>:[<span class="title class_">Array</span>,<span class="title class_">String</span>],<span class="comment">//多种类型</span></span><br><span class="line">    <span class="attr">name2</span>:&#123;</span><br><span class="line">        <span class="attr">type</span>:<span class="title class_">String</span>,</span><br><span class="line">        <span class="attr">default</span>:<span class="string">&#x27;123&#x27;</span>,</span><br><span class="line">        <span class="attr">required</span>:<span class="literal">true</span>   <span class="comment">//必传</span></span><br><span class="line">    &#125;，</span><br><span class="line">    <span class="comment">//高版本vue中Object或Array的default必须是函数</span></span><br><span class="line">    <span class="attr">name3</span>:&#123;</span><br><span class="line">        <span class="attr">type</span>:<span class="title class_">Array</span>,</span><br><span class="line">        <span class="title function_">default</span>(<span class="params"></span>)&#123;</span><br><span class="line">            <span class="keyword">return</span> []</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">//自定义验证函数参数必须是1或2或3</span></span><br><span class="line">    <span class="attr">name5</span>:&#123;</span><br><span class="line">        <span class="attr">validator</span>:<span class="keyword">function</span>(<span class="params">value</span>)&#123;</span><br><span class="line">            <span class="keyword">return</span> [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>].<span class="title function_">include</span>(value)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>注意<ul>
<li>vue 官方<code>不建议</code>在子组件<code>更改</code>父组件<code>传入的prop</code>属性值</li>
<li>可以在 data 手动设置一个对应属性值 <code>mynumber:this.number</code>这样重新定义一下</li>
<li>想同步到父级，在<code>@input</code>数据变化时<code>触发$emit</code>或<code>witch监听</code>数据变化时触发，通过自定义函数更改</li>
</ul>
</li>
</ul>
</li>
<li><p>子传父</p>
<ul>
<li>组件标签 <code>@selfevent=&#39;self&#39;</code></li>
<li>子组件 <code>this.$emit(selfevent,data)</code></li>
<li>父组件 <code>self(data)&#123;c.log(data)&#125;</code> 获取数据</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="父子访问-直接相互访问"><a href="#父子访问-直接相互访问" class="headerlink" title="父子访问(直接相互访问)"></a>父子访问(直接相互访问)</h3><ul>
<li>父访问子<ul>
<li><code>this.$children</code>:获取子组件列表，直接调用其方法</li>
<li><code>this.$refs</code>:给组件添加 ref 属性</li>
</ul>
</li>
<li>子访问父<ul>
<li><code>this.$parent</code>:不建议用</li>
<li><code>this.$root</code>:直接拿到顶层 vue 实例</li>
</ul>
</li>
</ul>
<h3 id="插槽"><a href="#插槽" class="headerlink" title="插槽"></a>插槽</h3><ul>
<li>默认<ul>
<li><code>组件中</code>设置<code>slot标签对</code>,父组件调用时<code>标签间</code>的内容就会替换到<code>子组件slot</code>的位置</li>
<li>子组件<code>slot标签</code>中可以直接设置<code>默认dom</code>,调用标签间有东西，就会覆盖掉</li>
<li>默认只会替换子组件<code>没有名字的slot</code></li>
</ul>
</li>
<li>具名插槽<ul>
<li>子组件:slot 标签设置<code>name:slotnamexx</code></li>
<li>父组件:要替换的标签中设置<code>slot=&quot;slotnamexx&quot;</code></li>
</ul>
</li>
<li>作用域插槽<ul>
<li>编译作用域:组件中只能用自己的 data 数据</li>
<li>作用:父组件替换插槽的标签,但是内容由子组件来提供</li>
<li>步骤:<ul>
<li>子组件<code>slot标签</code>自定义属性，储存<code>子组件的数据</code>，如:<code>:data=&#39;dataList&#39;</code></li>
<li>父组件调用的<code>标签对之间</code> 插入 <code>&lt;template slot-scope=&quot;slot&quot;&gt;&#123;&#123;slot.data&#125;&#125;&lt;/template&gt;</code></li>
<li>从而实现将子组件的数据拿到父组件的插槽中使用</li>
<li>v2.6 以上高版本可以不需要 template 标签了</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="进阶"><a href="#进阶" class="headerlink" title="进阶"></a>进阶</h2><h3 id="生命周期"><a href="#生命周期" class="headerlink" title="生命周期"></a>生命周期</h3><blockquote>
<p>事物<code>从诞生到消亡</code>的过程，当走到<code>某一步</code>的时候<code>调用</code>一个你传入的<code>钩子(hook)函数</code>，做你在这个时候想做的事情</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Vue</span>(<span class="params">option</span>)&#123;</span><br><span class="line">    <span class="number">1.</span>xxx</span><br><span class="line">    <span class="number">2.</span>xxx</span><br><span class="line">    <span class="number">3.</span>创建好的时候</span><br><span class="line">        option.<span class="property">created</span>?option.<span class="title function_">created</span>()</span><br><span class="line">        源码:<span class="title function_">callHook</span>(vm,<span class="string">&quot;created&quot;</span>)</span><br><span class="line">    <span class="number">4.</span>xxx</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">    <span class="attr">el</span>:<span class="string">&quot;#app&quot;</span></span><br><span class="line">    <span class="comment">// 创建</span></span><br><span class="line">    <span class="title function_">beforeCreate</span>(<span class="params"></span>)&#123;&#125;,</span><br><span class="line">    <span class="title function_">created</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="comment">//当走到第三步的时候就好自动执行这里的程序</span></span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;创建好了&quot;</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">//挂载</span></span><br><span class="line">    <span class="title function_">beforeMount</span>(),</span><br><span class="line">    <span class="title function_">mounted</span>(),</span><br><span class="line">    <span class="comment">//更新</span></span><br><span class="line">    <span class="title function_">beforeUpdate</span>(),</span><br><span class="line">    <span class="title function_">updated</span>(),</span><br><span class="line">    <span class="comment">//销毁</span></span><br><span class="line">    <span class="title function_">beforeDestroy</span>(),</span><br><span class="line">    <span class="title function_">destroyed</span>(),</span><br><span class="line"></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="模块化"><a href="#模块化" class="headerlink" title="模块化"></a>模块化</h3><blockquote>
<p>  模块化开发目的是将项目划分为一个个小结构、<br>  这个结构中编写自己的<code>逻辑代码</code>,有<code>自己的作用域</code>，不会影响到其他结构<br>  这个结构也可将自己希望暴露的<code>变量</code>,<code>函数</code>,<code>对象</code>等导出给其他结构使用<br>  也可以通过某中方式导入其他结构的<code>变量</code>,<code>函数</code>,<code>对象</code><br>  将程序按照种子方式开发就叫<code>模块化开发</code><br>  核心就是<code>导入</code>和<code>导出</code></p>
</blockquote>
<blockquote>
<p>  自从出现<code>ajax</code>前后的分离、SPA页面需要<code>路由 状态管理</code>、Nodejs还有编写后端程序，模块化更加重要了</p>
</blockquote>
<ul>
<li>非模块化产生的问题<ul>
<li>多文件<code>全局变量命名冲突</code><ul>
<li>利用函数作用域<code>;(function()&#123;xxx&#125;)()</code> 匿名函数自执行(IIFE)</li>
<li>里面的<code>代码无法复用</code></li>
<li>升级自己的模块化  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//fileA</span></span><br><span class="line"><span class="keyword">var</span> modelA = (<span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">let</span> num = <span class="number">1</span>;</span><br><span class="line">    <span class="keyword">return</span> &#123; num &#125;</span><br><span class="line">&#125;)()</span><br><span class="line"><span class="comment">//fileB</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(modelA.<span class="property">num</span>) <span class="comment">//1 </span></span><br></pre></td></tr></table></figure></li>
<li>缺点<ul>
<li>必须记得每个模块返回对象的命名如<code>modelA</code></li>
<li>每个文件都要包裹要给匿名函数</li>
<li>没有适合的规范，每个人公司都有自己的写法</li>
<li>所以js社区出现了很多好用的规范<code>AMD</code>、<code>CMD</code>、<code>Commonjs</code>、<code>ES6 的模块化</code></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>常见模块化规范<ul>
<li><p><code>CommonJS</code>:</p>
<ul>
<li>运用于:<code>node</code></li>
</ul>
  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 导入</span></span><br><span class="line"><span class="comment"> * node运行文件，每个js文件都是一个模块，一个commonjs的模块</span></span><br><span class="line"><span class="comment"> * require 作用是拿到指定模块中 的exports对象地址，并返回</span></span><br><span class="line"><span class="comment"> * node实现commonjs的本质就是对象的引用赋值</span></span><br><span class="line"><span class="comment"> * require(&quot;xxx&quot;)查找规则顺序</span></span><br><span class="line"><span class="comment"> *      1.如果xxx是./  ../   /开头，就会去当前文件夹、上层文件夹、根目录下查找模块</span></span><br><span class="line"><span class="comment"> *      2.查找优先级:xxx &gt; xxx.js &gt; xxx.json &gt; xxx.node &gt; xxx目录/index.js &gt; xxx目录/index.json &gt; xxx目录/index.node</span></span><br><span class="line"><span class="comment"> *      3.如果不是这些开头而是字符串, 优先级:核心模块 &gt; 当前目录下的node_modules &gt; 上级目录下的node_modules &gt; 上上...</span></span><br><span class="line"><span class="comment"> * 相同模块只会被加载一次,之后会被加入到缓存,module的loaded属性变为true</span></span><br><span class="line"><span class="comment"> * 循环嵌套引入:按顺序依次加载,最后模块没引入了,再返回最后一层的上一层继续执行,最后再执行第一个文件的后续代码,遇到加载过的则跳过</span></span><br><span class="line"><span class="comment"> *      图结构的深度优先算法</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * 加载过程:运行时同步加载</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">let</span> &#123;obj1,obj2&#125; = <span class="built_in">require</span>(<span class="string">&quot;./xxxx&quot;</span>) <span class="comment">//导入并解构</span></span><br><span class="line"><span class="keyword">let</span> objs = <span class="built_in">require</span>(<span class="string">&quot;./xxxx&quot;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">//导出</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">    <span class="attr">obj</span>:obj,</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//或</span></span><br><span class="line"><span class="built_in">exports</span>.<span class="property">name</span> = name;</span><br><span class="line"><span class="comment">// 两者一样的，内部 module.exports = exports;</span></span><br><span class="line"><span class="comment">// 如果最后手动 module.exports = &#123;&#125;; 前面的 exports 都没了</span></span><br><span class="line"><span class="comment">// 再改吧exports数据时是不会变的，他们是两个对像</span></span><br><span class="line"></span><br><span class="line"> <span class="built_in">exports</span>.函数</span><br><span class="line"> <span class="variable language_">module</span>.<span class="property">exports</span> = 函数 <span class="comment">//必须 let objs = require(&quot;./xxxx&quot;)；导入，函数不能结构</span></span><br></pre></td></tr></table></figure></li>
<li><p><code>ES6的Modules</code></p>
<ul>
<li><code>script标签</code> 添加 <code>type=&quot;modules&quot;</code>，设置为模块化文件,本地文件不支持  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 默认导入</span></span><br><span class="line"><span class="keyword">import</span> model <span class="keyword">from</span> <span class="string">&quot;./xxx.js&quot;</span></span><br><span class="line"><span class="comment">// 按需导入,与到处的名称对应</span></span><br><span class="line"><span class="keyword">import</span> &#123;num,str,funName&#125; <span class="keyword">from</span> <span class="string">&quot;./xxxx.js&quot;</span></span><br><span class="line"><span class="comment">// 全部导入</span></span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> <span class="title class_">All</span> <span class="keyword">from</span> <span class="string">&quot;./xxxx.js&quot;</span> </span><br><span class="line"><span class="comment">// 起别名</span></span><br><span class="line"><span class="keyword">import</span> &#123;num <span class="keyword">as</span> newnum,str <span class="keyword">as</span> newstr&#125; <span class="keyword">from</span> <span class="string">&quot;./xxxx.js&quot;</span></span><br><span class="line"><span class="comment">// 先导入直接导出（方便所有文件的暴露统一导出）</span></span><br><span class="line"><span class="keyword">export</span> &#123;xxx,xxx,xxx&#125; <span class="keyword">from</span> <span class="string">&quot;./xxxx.js&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 同时导入默认的和其他的导出 </span></span><br><span class="line"><span class="keyword">import</span> defModel, &#123; a, b &#125; <span class="keyword">from</span> <span class="string">&quot;./xxx.js&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//导出 （导出的都是变量的引用）</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">let</span> str = <span class="string">&#x27;str&#x27;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">funName</span>(<span class="params"></span>)&#123;&#125;; <span class="comment">//导出函数</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">class</span> <span class="title class_">Person</span>&#123;&#125;; <span class="comment">//导出类</span></span><br><span class="line"><span class="keyword">export</span> &#123; <span class="comment">//export的语法 不是对象</span></span><br><span class="line">    num,xxx, str <span class="keyword">as</span> newstrname</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//-------default</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> xxxx <span class="comment">//default导出的只能有一个,可以让导入者自己命名</span></span><br><span class="line"><span class="keyword">import</span> xxx <span class="keyword">from</span> <span class="string">&quot;./xxxx.js&quot;</span> <span class="comment">//接收默认导出</span></span><br></pre></td></tr></table></figure></li>
<li>import 不能再逻辑代码中导入<ul>
<li>js引擎解析代码(词法分析，并没有执行)时，就要确认依赖关系了，而解析成二进制后才会运行代码</li>
<li>解析代码遇到类似if语句时，没有运行代码，不知道走哪条分支，也就不能确定是否要导入内部的依赖文件了</li>
<li>逻辑代码中可以用 <code>const promise = import(&quot;./xxx.js&quot;)</code>;异步函数</li>
<li>require()可以，是因为require是一个函数，是再运行阶段执行的   </li>
<li>导出的是大括号中变量的引用，后期导出的内容变化，导入的也会跟着变<ul>
<li>解析时<code>export</code> 到<code>import</code>时创建一块内存空间(模块环境变量 Module environment recode)</li>
<li>这块空间实时绑定（bindings）: <code>export &#123;name&#125;</code> -&gt; 空间中 <code>const name = name</code> -&gt; import 的时新定义的name</li>
<li>非引用类型:es发现name变化会删除原来的<code>const name = name值</code>,重新创建一个，import的永远时最新的，外面时<code>无法更改</code>的</li>
<li>引用类型:es发现name变化时<code>const name = name地址</code>,外面改变的是name地址指向的对象，是<code>可以更改</code>的</li>
</ul>
</li>
</ul>
</li>
<li>Node 对ES Module的支持<ul>
<li>模块默认一样需要后缀</li>
<li>老版本node，默认不能使用<ul>
<li>运行添加参数：<code>node index.js -experimental-modules</code>,实验阶段不稳定</li>
</ul>
</li>
<li>新版本node，默认不能使用的，node默认值commonjs的module<ul>
<li>方案1:在package.js 设置 “type”:”module”</li>
<li>方案2:将相关当作模块的文件的文件后缀改为<code>mjs</code></li>
</ul>
</li>
</ul>
</li>
<li>当前Node中ES Module 不能与 commonjs 交互的：ES Module，在解析是进行语法分析，commonjs是同步加载，实在运行时处理</li>
</ul>
</li>
<li><p><code>AMD</code></p>
<ul>
<li>define 定义 require 导入</li>
<li>require.js 引入后项目就可以支持AMD模块化了</li>
</ul>
</li>
<li><p><code>CMD</code></p>
<ul>
<li>seajs 实现</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="转脚手架步骤"><a href="#转脚手架步骤" class="headerlink" title="转脚手架步骤"></a>转脚手架步骤</h3><ul>
<li><p>默认</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;div id=<span class="string">&quot;app&quot;</span>&gt;&#123;&#123;message&#125;&#125;&lt;/div&gt;</span><br><span class="line"><span class="comment">//组件无</span></span><br><span class="line"><span class="comment">//创建实例</span></span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">    <span class="attr">el</span>:<span class="string">&quot;#app&quot;</span>,<span class="comment">//这个app是 html页面的app</span></span><br><span class="line">    <span class="attr">data</span>:&#123;</span><br><span class="line">        <span class="attr">message</span>:<span class="string">&#x27;message&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure></li>
<li><p>不改html页面</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;div id=<span class="string">&quot;app&quot;</span>&gt;&lt;/div&gt;</span><br><span class="line"><span class="comment">//组件无</span></span><br><span class="line"><span class="comment">//创建实例</span></span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">    <span class="attr">el</span>:<span class="string">&quot;#app&quot;</span>, </span><br><span class="line">    <span class="attr">template</span>:<span class="string">`&lt;div&gt;&lt;span&gt;&#123;&#123;message&#125;&#125;&lt;/span&gt;&lt;/div&gt;`</span>  <span class="comment">//模板替换&lt;div id=&quot;app&quot;&gt;&lt;/div&gt;插入到body中</span></span><br><span class="line">    <span class="attr">data</span>:&#123;</span><br><span class="line">        <span class="attr">message</span>:<span class="string">&#x27;message&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure></li>
<li><p>组件化抽离</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;div id=<span class="string">&quot;app&quot;</span>&gt;&lt;/div&gt;</span><br><span class="line"><span class="comment">//组件</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">App</span> = &#123;</span><br><span class="line">    <span class="attr">template</span>:<span class="string">`&lt;div&gt;&lt;span&gt;&#123;&#123;message&#125;&#125;&lt;/span&gt;&lt;/div&gt;`</span>,</span><br><span class="line">    <span class="title function_">data</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            <span class="attr">message</span>:<span class="string">&quot;message&quot;</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//创建实例</span></span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">    <span class="attr">el</span>:<span class="string">&quot;#app&quot;</span>,</span><br><span class="line">    <span class="attr">template</span>:<span class="string">`&lt;App/&gt;`</span> <span class="comment">//调用一下App标签,因为只有一个元素他自己就是跟 </span></span><br><span class="line">    <span class="attr">components</span>:&#123;</span><br><span class="line">        <span class="title class_">App</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure></li>
<li><p>模块化</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//html</span></span><br><span class="line">&lt;div id=<span class="string">&quot;app&quot;</span>&gt;&lt;/div&gt;</span><br><span class="line"><span class="comment">//导入</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">&#x27;./App&#x27;</span></span><br><span class="line"><span class="comment">//创建实例</span></span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">    <span class="attr">el</span>:<span class="string">&quot;#app&quot;</span>,</span><br><span class="line">    <span class="attr">template</span>:<span class="string">`&lt;App/&gt;`</span> <span class="comment">//调用一下App标签,因为只有一个元素他自己就是跟 </span></span><br><span class="line">    <span class="attr">components</span>:&#123;</span><br><span class="line">        <span class="title class_">App</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>导出app.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//App.js</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123; </span><br><span class="line">    <span class="attr">template</span>:<span class="string">`&lt;div&gt;&lt;span&gt;&#123;&#123;message&#125;&#125;&lt;/span&gt;&lt;/div&gt;`</span>,</span><br><span class="line">    <span class="title function_">data</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            <span class="attr">message</span>:<span class="string">&quot;message&quot;</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>.vue文件</p>
</li>
</ul>
<blockquote>
<p><code>.vue</code>文件需要配置loader</p>
</blockquote>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">npm install vue-loader vue-template-compiler -D //loader和编译插件</span><br><span class="line"><span class="meta prompt_">#</span><span class="language-bash">vue-loader14以上版本需要加一个插件</span></span><br><span class="line"><span class="meta prompt_"></span></span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">webpack</span></span><br><span class="line">&#123;</span><br><span class="line">    test:/\.vue/,</span><br><span class="line">    use:[&#x27;vue-loader&#x27;]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;<span class="name">span</span>&gt;</span>&#123;&#123;message&#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="title function_">data</span>(<span class="params"></span>)&#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">message</span>:<span class="string">&quot;message&quot;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;   </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<h2 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h2><ul>
<li><p><code>MVVM</code>:Model View ViewModel</p>
<ul>
<li><code>View</code>:挂载的 dom 下的页面<ul>
<li>视图层、DOM 层，给用户展示各种信息</li>
</ul>
</li>
<li><code>Model</code>:js 数据<ul>
<li>数据层，固定数据、借口数据等</li>
</ul>
</li>
<li><code>ViewModel</code>：<code>new Vue()</code><ul>
<li>试图模型层，<code>View</code>与<code>Model</code>沟通的桥梁</li>
<li>数据绑定到页面上，数据改变<code>通过VM的处理</code>实时显示到<code>页面View</code>上</li>
<li><code>监听View的事件</code>，触发事件时去调用 Model 的方法</li>
</ul>
</li>
</ul>
</li>
<li><p><code>虚拟DOM（vdom)</code>  </p>
</li>
<li><p><code>runtime-only</code> 与 <code>runtime-compiler(编译类型)</code> 的差别<br> <img src= "" data-lazy-src="/../../../static/img/vue-vue2-1.png" alt="差异"></p>
<ul>
<li>vue解析过程<ul>
<li>template –解析-&gt; ast(抽象语法树) –编译-&gt; render函数 –形成-&gt; 虚拟dom(vdom) –&gt; 真实DOM</li>
<li><code>runtime-only</code>:直接从render开始无需编译(性能高、代码量少)</li>
<li><code>render函数</code>解析<ul>
<li>完整的render函数  <figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">render:function(createElement)&#123;</span><br><span class="line">    return createElement(&quot;h2&quot;,&#123;class:&quot;box&quot;&#125;,[&#x27;hello word&#x27;,createElement(xxx)])</span><br><span class="line">    # 渲染一个class=box 内容为hello word的h2标签，替换index.html的#app节点</span><br><span class="line">    # h2标签直接换成组件 就是 runtime-only的写法</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
<li>main.js引入的APP组件以及是编译成<code>render函数</code>, 里面不存在<code>&lt;template&gt;</code>模板了，通过<code>vue-template-compiler</code>完成</li>
</ul>
</li>
</ul>
</li>
<li><p>前端渲染与后端渲染</p>
<ul>
<li>后端渲染<ul>
<li>服务器拿到浏览器发送的地址，服务器分析地址，通过jsp、php等技术，结合js+html+后端语言直接生成页面，在不这个页面返回到浏览器中</li>
<li>后端语言是来操作数据库，动态将数据放到页面中</li>
<li>一个url对应一个页面的映射关系，在后端处理就是后端路由</li>
</ul>
</li>
<li>前端渲染(前后端分离阶段)<ul>
<li>ajax出现后，后端只负责提供数据</li>
<li>一般公司会分静态资源服务其和API接口服务器</li>
<li>访问网站 –&gt; 静态资源服务器获取页面 –&gt; 解析页面遇到ajax –&gt; 向API服务器请求数据 –&gt; 通过js将数据渲染到页面</li>
<li>工作明确，一套接口多端运用</li>
</ul>
</li>
<li>前端路由(前端渲染基础添加路由)<ul>
<li>SPA单页面应用</li>
<li>访问页面直接下载引入的静态资源与当前路由页面访问到的接口,(默认所以.vue都会打包到同一个js中)</li>
<li>点击按钮跳转时，生成URL，不会请求静态资源，而是去开始下载的资源里抽取当前页面需要显示的东西(类似某一个组件)</li>
<li>从而形成一个URL对应一个组件的映射关系，由前端管理,就叫前端路由    </li>
<li>改变url不刷新页面，而是获取开始下载资源中对应组件内容</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="配置文件"><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h3><ul>
<li>package.json ^…,最会第三位版本号自动升级, ~…,第二位和第三位自动升级</li>
<li>package-lock.js 记录项目中安装的真实版本</li>
<li><code>bate</code>版本都是测试不稳定的版本</li>
</ul>
<h2 id="生态系统"><a href="#生态系统" class="headerlink" title="生态系统"></a>生态系统</h2><h3 id="vue-router"><a href="#vue-router" class="headerlink" title="vue-router"></a>vue-router</h3><ul>
<li><p>基础</p>
<ul>
<li>知识点<ul>
<li>所有组件都继承自Vue原型</li>
</ul>
</li>
<li>改变路径而不刷新vue提供的方式方式hash或history<ul>
<li>history<ul>
<li>history.pushState({},””,”laster”);栈结构，新进后出，每次push后，浏览器显示的的都是当前push的 </li>
<li>history.replace </li>
<li>history.go(-1),退后一步骤，-2后退两步,.back &#x3D;&#x3D; .go(-1),.forward &#x3D; .go(1)向前一步</li>
</ul>
</li>
</ul>
</li>
<li>安装 npm安装 vue-router<ul>
<li><code>导入</code>对象，调用<code>Vue.use(VueRouter)</code>安装插件(VueRouter.install)</li>
<li><code>创建实例</code>传入<code>映射配置</code></li>
<li>Vue实例中挂载路由实例</li>
</ul>
</li>
<li>使用步骤<ul>
<li><p>创建路由需要映射的组件</p>
</li>
<li><p><code>&lt;router-link to=&quot;/home&quot;&gt;首页&lt;/router-link&gt;</code>:标签跳转，或通过事件<code>push</code>等方式跳转</p>
<ul>
<li><code>to=&quot;/xxx&quot;</code>:指定跳转位置<ul>
<li><code>:to=&quot;&#123;path:&#39;xxx&#39;,query:&#39;xxx&#39;&#125;&quot;</code>:query传参</li>
</ul>
</li>
<li><code>tag=&quot;div&quot;</code>：渲染成指定标签，默认渲染成a标签</li>
<li><code>replace</code>：使用replace替换</li>
<li><code>active-class=&quot;xxx&quot;</code>:指定激活元素拥有的类(new VueRouter({linkActiveClass:’xxx’}),全部统一更改)</li>
<li>通过js跳转<ul>
<li><code>this.$router.push(&#39;/xxx&#39;)</code>:push、replace</li>
<li><code>this.$router.push(&#39;/xxx&#39;)</code>:push、replace</li>
</ul>
</li>
</ul>
</li>
<li><p><code>&lt;router-view&gt;&lt;/router-view&gt;</code>:设置存放的位置</p>
<ul>
<li>渲染组件容器，路由切换的是这变挂载的组件，其他内容不变</li>
</ul>
</li>
</ul>
</li>
<li><code>keep-alive</code>:vue内置组件,可以使被包含的组件被缓存，保留状态，避免重新渲染<ul>
<li>属性<ul>
<li><code>exclude=&quot;组件name,name2&quot;</code>:不缓存排除名称的组件</li>
</ul>
</li>
<li>搭配的两个钩子函数<ul>
<li>activated(){},激活所在组件触发</li>
<li>deactivated(){}，切换，离开组件时触发</li>
</ul>
</li>
</ul>
</li>
<li>组件内的导航守卫<ul>
<li>生命周期钩子同级:beforeRouteLeave(to,from,next){}</li>
</ul>
</li>
</ul>
</li>
<li><p>vue webpack 打包</p>
<ul>
<li>文件 <code>app.xxxx.js</code>：存放应用程序开发的所以js业务代码</li>
<li>文件 <code>vendor.xxxx.js</code>：存放第三方插件、库、包、框架</li>
<li>文件 <code>manifest.xxx.js</code>:为打包代码做底层支撑运行时代码，<code>相互依赖</code>、<code>导入导出</code>等功能的处理</li>
<li>路由懒加载<ul>
<li>程序运行时vendor、manifest必须要的，然而app却可以拆分</li>
<li>把不同路由对应组件分割开来,路由被访问到时再加载对应资源，更加高效</li>
</ul>
</li>
</ul>
</li>
<li><p>路由懒加载</p>
</li>
</ul>
<p><a target="_blank" rel="noopener" href="https://www.bilibili.com/video/BV15741177Eh?p=2&spm_id_from=pageDriver">地址</a></p>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="http://example.com">lzoxun</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://example.com/2023/07/22/web/vue/vue-vue2/">http://example.com/2023/07/22/web/vue/vue-vue2/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://example.com" target="_blank">学习笔记</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"></div><div class="post_share"><div class="social-share" data-image="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2023/07/22/web/vue/vue-ssr-nuxt/" title="nuxt"><div class="cover" style="background: var(--default-bg-color)"></div><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">nuxt</div></div></a></div><div class="next-post pull-right"><a href="/2023/07/22/web/tool/web-my-vuecli/" title="开发脚手架工具"><div class="cover" style="background: var(--default-bg-color)"></div><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">开发脚手架工具</div></div></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src= "" data-lazy-src="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">lzoxun</div><div class="author-info__description"></div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">108</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">1</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">0</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/liaozhongxun"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/liaozhongxun" target="_blank" title="Github"><i class="fab fa-github" style="color: #24292e;"></i></a><a class="social-icon" href="mailto:869664233@gmail.com" target="_blank" title="Email"><i class="fas fa-envelope" style="color: #4a7dbe;"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">这是我的文档</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9F%BA%E7%A1%80"><span class="toc-number">1.</span> <span class="toc-text">基础</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%B8%E5%85%B3%E4%BF%A1%E6%81%AF"><span class="toc-number">1.1.</span> <span class="toc-text">相关信息</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%9E%E4%BE%8B-option"><span class="toc-number">1.2.</span> <span class="toc-text">实例 option</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AF%AD%E6%B3%95"><span class="toc-number">1.3.</span> <span class="toc-text">语法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BB%84%E4%BB%B6%E5%8C%96"><span class="toc-number">2.</span> <span class="toc-text">组件化</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%84%E4%BB%B6%E6%B3%A8%E5%86%8C%E4%B8%8E%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6"><span class="toc-number">2.1.</span> <span class="toc-text">组件注册与父子组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BB%84%E4%BB%B6%E9%80%9A%E8%AE%AF"><span class="toc-number">2.2.</span> <span class="toc-text">组件通讯</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%88%B6%E5%AD%90%E8%AE%BF%E9%97%AE-%E7%9B%B4%E6%8E%A5%E7%9B%B8%E4%BA%92%E8%AE%BF%E9%97%AE"><span class="toc-number">2.3.</span> <span class="toc-text">父子访问(直接相互访问)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8F%92%E6%A7%BD"><span class="toc-number">2.4.</span> <span class="toc-text">插槽</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BF%9B%E9%98%B6"><span class="toc-number">3.</span> <span class="toc-text">进阶</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-number">3.1.</span> <span class="toc-text">生命周期</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="toc-number">3.2.</span> <span class="toc-text">模块化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BD%AC%E8%84%9A%E6%89%8B%E6%9E%B6%E6%AD%A5%E9%AA%A4"><span class="toc-number">3.3.</span> <span class="toc-text">转脚手架步骤</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A6%82%E5%BF%B5"><span class="toc-number">4.</span> <span class="toc-text">概念</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="toc-number">4.1.</span> <span class="toc-text">配置文件</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%94%9F%E6%80%81%E7%B3%BB%E7%BB%9F"><span class="toc-number">5.</span> <span class="toc-text">生态系统</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#vue-router"><span class="toc-number">5.1.</span> <span class="toc-text">vue-router</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/07/22/window/win-11/" title="win 11 set">win 11 set</a><time datetime="2023-07-22T07:14:09.700Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/07/22/window/win-gitbash/" title="git bash">git bash</a><time datetime="2023-07-22T07:14:09.700Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/07/22/window/win-wsl/" title="wsl">wsl</a><time datetime="2023-07-22T07:14:09.700Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/07/22/window/win-main/" title="window">window</a><time datetime="2023-07-22T07:14:09.700Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/07/22/web/%E5%85%BC%E5%AE%B9%E9%97%AE%E9%A2%98/" title="兼容问题">兼容问题</a><time datetime="2023-07-22T07:14:09.699Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2023 By lzoxun</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script>function panguFn () {
  if (typeof pangu === 'object') pangu.autoSpacingPage()
  else {
    getScript('https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js')
      .then(() => {
        pangu.autoSpacingPage()
      })
  }
}

function panguInit () {
  if (false){
    GLOBAL_CONFIG_SITE.isPost && panguFn()
  } else {
    panguFn()
  }
}

document.addEventListener('DOMContentLoaded', panguInit)</script><div class="js-pjax"></div><script id="canvas_nest" defer="defer" color="0,0,255" opacity="0.7" zIndex="-1" count="99" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/canvas-nest.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div class="no-result" id="local-search-results"></div><div id="local-search-stats-wrap"></div></div></div><div id="search-mask"></div><script src="/js/search/local-search.js"></script></div></div><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"log":false,"model":{"jsonPath":"/live2dw/assets/haruto.model.json"},"display":{"position":"right","width":100,"height":200,"right":300},"mobile":{"show":true}});</script></body></html>